import { getClickNumTotalCountUsingGet } from '@/services/backend/bisheProjectController';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Area, Column } from '@ant-design/plots';
import { useRequest } from '@umijs/max';
import { Col, Progress, Row, Tooltip } from 'antd';
import numeral from 'numeral';
import useStyles from '../style.style';
import Yuan from '../utils/Yuan';
import { ChartCard, Field } from './Charts';
import Trend from './Trend';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: {
    marginBottom: 24,
  },
};

interface Props {
  loading: boolean;
  data: API.SalesStatisticsDTO;
  bisheData: API.BisheProjectStatisticsDTO;
}

const IntroduceRow: React.FC<Props> = (props) => {
  const { styles } = useStyles();
  const { data: clickNumData } = useRequest(getClickNumTotalCountUsingGet);
  const { loading, data, bisheData } = props;
  return (
    <Row gutter={24}>
      <Col {...topColResponsiveProps}>
        <ChartCard
          variant={'borderless'}
          title="总销售额"
          action={
            <Tooltip title="指标说明">
              <InfoCircleOutlined />
            </Tooltip>
          }
          loading={loading}
          total={() => <Yuan>{data?.totalSales ?? 0}</Yuan>}
          footer={<Field label="日销售额" value={`￥${numeral(data?.todaySales).format('0,0')}`} />}
          contentHeight={46}
        >
          <Trend
            flag={(data?.weekOnWeekRate ?? 0) >= 0 ? 'up' : 'down'}
            style={{
              marginRight: 16,
            }}
          >
            周同比
            <span className={styles.trendText}>{`${data?.weekOnWeekRate ?? 0}%`}</span>
          </Trend>
          <Trend flag={(data?.dayOnDayRate ?? 0) >= 0 ? 'up' : 'down'}>
            日同比
            <span className={styles.trendText}>{`${data?.dayOnDayRate ?? 0}%`}</span>
          </Trend>
        </ChartCard>
      </Col>

      <Col {...topColResponsiveProps}>
        <ChartCard
          variant={'borderless'}
          loading={loading}
          title="项目总访问量"
          action={
            <Tooltip title="指标说明">
              <InfoCircleOutlined />
            </Tooltip>
          }
          total={numeral(clickNumData ?? 0).format('0,0')}
          footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
          contentHeight={46}
        >
          <Column
            xField="name"
            yField="clickNum"
            padding={-20}
            axis={false}
            height={46}
            data={bisheData?.top15BisheProjectsByClickNum ?? []}
            scale={{ x: { paddingInner: 0.4 } }}
          />
        </ChartCard>
      </Col>
      <Col {...topColResponsiveProps}>
        <ChartCard
          variant={'borderless'}
          loading={loading}
          title="支付笔数"
          action={
            <Tooltip title="指标说明">
              <InfoCircleOutlined />
            </Tooltip>
          }
          total={numeral(data?.paidOrders ?? 0).format('0,0')}
          footer={<Field label="转化率" value={`${data?.conversionRate ?? 0}%`} />}
          contentHeight={46}
        >
          <Area
            xField="x"
            yField="y"
            shapeField="smooth"
            height={46}
            axis={false}
            style={{
              fill: 'linear-gradient(-90deg, white 0%, #975FE4 100%)',
              fillOpacity: 0.6,
              width: '100%',
            }}
            padding={-20}
            data={data?.last15DaysPaymentData ?? []}
          />
        </ChartCard>
      </Col>
      <Col {...topColResponsiveProps}>
        <ChartCard
          loading={loading}
          variant={'borderless'}
          title="平均订单价格"
          action={
            <Tooltip title="指标说明">
              <InfoCircleOutlined />
            </Tooltip>
          }
          total={`${numeral((data?.totalSales ?? 0) / (data?.paidOrders ?? 1)).format('0,0')}`}
          footer={
            <div
              style={{
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              <Trend
                flag="up"
                style={{
                  marginRight: 16,
                }}
              >
                周同比
                <span className={styles.trendText}>12%</span>
              </Trend>
              <Trend flag="down">
                日同比
                <span className={styles.trendText}>11%</span>
              </Trend>
            </div>
          }
          contentHeight={46}
        >
          <Progress
            percent={data?.conversionRate ?? 0}
            strokeColor={{ from: '#108ee9', to: '#87d068' }}
            status="active"
          />
        </ChartCard>
      </Col>
    </Row>
  );
};
export default IntroduceRow;
